<template>
  <div>
    <template>
      <Table border :columns="columns" :data="data">
        <template slot-scope="{ row }" slot="suqiu_state">
          <span v-show="row.suqiu_state === '10'">待接收</span>
          <span v-show="row.suqiu_state === '20'">待分配</span>
          <span v-show="row.suqiu_state === '30'">已分配等待工作者处理</span>
          <span v-show="row.suqiu_state === '35'">已核实</span>
          <span v-show="row.suqiu_state === '40'">核实并同意</span>
          <span v-show="row.suqiu_state === '50'">核实并驳回</span>
          <span v-show="row.suqiu_state === '60'">办理中</span>
          <span v-show="row.suqiu_state === '70'">处理结束</span>
          <span v-show="row.suqiu_state === '80'">公布结果</span>
          <span v-show="row.suqiu_state === '90'">已评价</span>
          <span v-show="row.suqiu_state === '100'">公示</span>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <Button size="small" type="success" @click="appealDetailButton(row)" style="margin-left: 5px">详情</Button>
          <Button size="small" v-show="row.suqiu_state === '10'" type="warning" @click="receiveButton(row)"
                  style="margin-left: 5px">接收
          </Button>
          <Button size="small" v-show="row.suqiu_state === '20'" type="primary" @click="distributionButton(row)"
                  style="margin-left: 5px">分配
          </Button>
          <Button size="small" v-show="row.suqiu_state === '70'" type="info" style="margin-left: 5px"
                  @click="resultButton(row)">填写结果
          </Button>
          <Button size="small" v-show="row.suqiu_state === '90' || row.suqiu_state === '100'" type="warning" style="margin-left: 5px"
                  @click="getApprais(row)">查看评价
          </Button>
          <Button size="small" v-show="row.suqiu_state === '80' || row.suqiu_state === '90'" type="warning"
                  style="margin-left: 5px"
                  @click="gongShi(row)">公示
          </Button>
        </template>
      </Table>
      <template>
        <div class="pageClass">
          <Page :total="params.totalRecord" show-sizer @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
        </div>
      </template>
    </template>
    <Modal
      v-model="distribution.modal"
      title="分配诉求"
      @on-ok="distributionOk">
      <div style="text-align: center">
        <Select v-model="pick_office" style="width:200px" placeholder="选择分配 人员">
          <Option v-for="item in officeAccountList" :value="item.login_name" :key="item.id">{{ item.name }} (
            {{ item.login_name }} )
          </Option>
        </Select>
      </div>
    </Modal>
    <Drawer width="500px" title="诉求详情" :closable="false" v-model="appealDetail.show">
      <div style="font-size: 14px">
        <div class="divtitleClass">
          诉求发起人信息
        </div>
        <Row>
          <Col span="12">发起人姓名：{{ appealDetail.info.name }}</Col>
          <Col span="12">发起人身份证号：{{ appealDetail.info.TMcardno }}</Col>
        </Row>
        <Row>
          <Col span="12">发起人电话号：{{ appealDetail.info.mobile }}</Col>
        </Row>
        <div class="divtitleClass">
          诉求基本信息
        </div>
        <Row>
          <Col span="24">诉求发起时间：{{ appealDetail.info.create_time }}</Col>
        </Row>
        <Row>
          <Col span="12">诉求编码：{{ appealDetail.info.suqiu_code }}</Col>
          <Col span="12">诉求标题：{{ appealDetail.info.suqiu_title }}</Col>
        </Row>
        <Row>
          <Col span="12">诉求类型：{{ appealDetail.info.suqiu_type }}</Col>
          <Col span="12">诉求描述：{{ appealDetail.info.suqiu_describe }}</Col>
        </Row>
        <Row>
          <Col span="24">诉求备注：{{ appealDetail.info.suqiu_remarks }}</Col>
        </Row>
        <Row>
          <Col span="24">诉求图片：
            <!--          {{appealDetail.info.suqiu_img}}-->
            <div v-if="appealDetail.show && appealDetail.info.suqiu_img_list.length > 0"
                 style="text-align: center;margin-bottom: 20px;margin-top: 20px">
              <Carousel v-model="carousel_value">
                <CarouselItem v-for="(item,index) in appealDetail.info.suqiu_img_list" :key="index">
                  <img :src="item" width="100%">
                </CarouselItem>
              </Carousel>
            </div>
          </Col>
        </Row>
        <Row>
          <Col span="24">诉求视频：</Col>
        </Row>
        <Row>
          <template>
            <div v-if="appealDetail.info.suqiu_video === '' || appealDetail.info.suqiu_video === undefined"></div>
            <video v-else id="myVideo" class="video-js">
              <source :src="appealDetail.info.suqiu_video" type="video/mp4">
            </video>
          </template>
        </Row>
        <Row>
          <Col span="12">诉求核实人：{{ appealDetail.info.suqiu_login_name_h }}</Col>
          <Col span="12">诉求处理人：{{ appealDetail.info.suqiu_login_name_s }}</Col>
        </Row>
      </div>
    </Drawer>
    <Modal
      v-model="resultModal"
      title="填写结果"
      @on-ok="resultOk">
      <Input v-model="resultMsg" maxlength="100" show-word-limit type="textarea" placeholder="请填写结果"/>
    </Modal>
    <Drawer width="500px" :title="appraisModal.title" :closable="false" v-model="appraisModal.show">
      <div v-for="(item,index) in appraisModal.data" :key="index">
        <Row>
          <Col span="5">{{ item.pingjia_setting_title }}</Col>
          <Col span="19">
            <Rate show-text disabled :count="Number(item.pingjia_max_star)" :value="Number(item.pingjia_star)"/>
          </Col>
        </Row>
        <Row>
          <Col span="24">
            <Input disabled :value="item.pingjia_describe" type="textarea" :rows="5"></Input>
          </Col>
        </Row>
      </div>
    </Drawer>
    <Modal
      v-model="gongShimModal.show"
      :title="gongShimModal.title"
      @on-ok="gongShiOk">
      确认公示此诉求？
    </Modal>
  </div>
</template>

<script>
import { createAppealFlow, findAppealList, findOfficeAccountList } from '../../api/ywtbappeal'
import { getSuqiuPingjiaList } from '@/api/ywtg'
import expandRow from './components/'

export default {
  name: 'index',
  components: { expandRow },
  data () {
    return {
      carousel_value: 0,
      columns: [
        {
          type: 'expand',
          width: 50,
          render: (h, params) => {
            return h(expandRow, {
              props: {
                row: params.row
              }
            })
          }
        },
        {
          title: '诉求编号',
          key: 'suqiu_code',
          align: 'center'
        },
        {
          title: '姓名',
          key: 'name',
          align: 'center'
        },
        {
          title: '身份证号',
          key: 'TMcardno',
          align: 'center'
        },
        {
          title: '手机号',
          key: 'mobile',
          align: 'center'
        },
        {
          title: '诉求状态',
          slot: 'suqiu_state',
          align: 'center'
        },
        {
          title: '诉求标题',
          key: 'suqiu_title',
          align: 'center'
        },
        // {
        //   title: '诉求类型',
        //   key: 'suqiu_type',
        //   align: 'center'
        // },
        // {
        //   title: '诉求核实人',
        //   key: 'suqiu_login_name_h',
        //   align: 'center'
        // },
        // {
        //   title: '诉求办理人',
        //   key: 'suqiu_login_name_s',
        //   align: 'center'
        // },
        {
          title: '操作',
          slot: 'action',
          width: 200,
          align: 'center'
        }
      ],
      data: [],
      params: {
        totalRecord: 0,
        pageNo: 1,
        pageSize: 10
      },
      severUserInfo: {},
      distribution: {
        info: {},
        modal: false
      },
      officeAccountList: [],
      pick_office: '',
      appealDetail: {
        info: {},
        show: false
      },
      resultModal: false,
      resultInfo: {},
      resultMsg: '',
      appraisModal: {
        title: '',
        show: false,
        data: {}
      },
      gongShimModal: {
        title: '',
        show: false,
        data: {}
      }
    }
  },
  mounted () {
    this.severUserInfo = this.$store.state.user.severUserInfo
    this.init()
  },
  methods: {
    init () {
      let data = this.params
      if (this.severUserInfo.loginName.endsWith('_admin')) {
        data.type = 'admin'
      }
      findAppealList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.params.totalRecord = ret.data.data.totalRecord
          this.data = ret.data.data.results
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.params.pageNo = 1
      this.init()
    },
    pageAction (e) {
      this.params.pageNo = e
      this.init()
    },
    receiveButton (e) {
      let data = {
        suqiu_code: e.suqiu_code,
        suqiu_state: '20'
      }
      // console.log(data)
      createAppealFlow(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '接收成功！', desc: ret.data.errmsg })
          this.init()
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    distributionButton (e) {
      this.distribution.info = e
      this.distribution.modal = true
      this.findOfficeAccountList()
    },
    distributionOk () {
      let data = {
        suqiu_state: '30',
        suqiu_code: this.distribution.info.suqiu_code,
        suqiu_login_name_h: this.pick_office,
        to_login_name: this.pick_office
      }
      // console.log('distributionOk', data)
      createAppealFlow(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '分配成功！', desc: ret.data.errmsg })
          this.init()
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    findOfficeAccountList () {
      findOfficeAccountList().then(ret => {
        if (ret.data.errcode === 0) {
          this.officeAccountList = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    appealDetailButton (e) {
      this.appealDetail.info = e
      this.appealDetail.info.suqiu_img_list = this.appealDetail.info.suqiu_img.split(',')
      this.$nextTick(() => {
        this.initVideo()
      })
      this.appealDetail.show = true
    },
    initVideo () {
      // 初始化视频方法
      let myPlayer = this.$video(myVideo, {
        // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        controls: true,

        // 自动播放属性,muted:静音播放,并且从视频加载完成后就开始播放
        // autoplay: 'muted',

        // 建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        preload: 'auto',

        // 设置视频播放器的显示宽度（以像素为单位,也可以使用%）
        width: '400px',

        // 设置视频播放器的显示高度（以像素为单位,也可以使用%）
        height: '200px'

        // 设置视频的封面
        // poster: require('../../assets/images/backImg.png')
      })
      console.log(myPlayer)
    },
    resultButton (e) {
      this.resultInfo = e
      this.resultModal = true
    },
    resultOk () {
      let data = {
        suqiu_state: '80',
        suqiu_code: this.resultInfo.suqiu_code,
        suqiu_flow_describe: this.resultMsg
      }
      console.log(data)
      createAppealFlow(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '保存成功！', desc: ret.data.errmsg })
          this.init()
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    getApprais (row) {
      getSuqiuPingjiaList(row).then(ret => {
        if (ret.data.errcode === 0) {
          this.appraisModal.data = ret.data.data
          this.appraisModal.title = '评价信息'
          this.appraisModal.show = true
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    gongShi (e) {
      this.gongShimModal.title = '确认公示'
      this.gongShimModal.show = true
      this.gongShimModal.date = e
    },
    gongShiOk () {
      let data = {
        suqiu_state: '100',
        suqiu_code: this.gongShimModal.date.suqiu_code
      }
      console.log(data)
      createAppealFlow(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '保存成功！', desc: ret.data.errmsg })
          this.init()
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    }
  }

}
</script>

<style scoped>
.pageClass {
  margin-top: 20px;
  text-align: right
}

.divtitleClass {
  background-color: rgb(236, 248, 255);
  border-left: 5px solid rgb(80, 191, 255);
  border-radius: 4px;
  font-size: 16px;
  margin: 15px 0px;
  padding: 8px 12px;
  width: 100%;
}
</style>
